<template>
  <span>
    <q-popup-proxy ref="popover5" transition-show="jump-up" transition-hide="jump-down" v-model="showModal">
        <q-card>
         <q-tab-panels v-model="tab" animated>
          <q-tab-panel name="init">
               <div class="emoji_div">
                     <img
                             v-for="(v,i) in emojiList"
                             :src="require(`../../statics/faces/${v}`)"
                             :key="i"
                             @click="selectEmoji(i)"
                             class="img-style"
                     />
                </div>
          </q-tab-panel>
          <q-tab-panel name="love">
               <div class="emoji_div">
                      <img :src="require(`../../statics/icons/add.png`)" @click="addEmoji" class="img-style" />
                </div>
          </q-tab-panel>

        </q-tab-panels>
         <q-separator/>
            <div>
                <q-btn flat @click="tab = 'init'" :style="'background:'+ (tab === 'init'? '#c8c8c8':'') ">
                    <img :src="require('../../statics/icons/initEmoji.png') " class="icon_div"/>
                </q-btn>
                <q-btn flat @click="tab = 'love'" :style="'background:'+ (tab === 'love'? '#c8c8c8':'')">
                    <img :src="require('../../statics/icons/love.png') " class="icon_div"/>
                </q-btn>
            </div>
      </q-card>
    </q-popup-proxy>
    <q-btn round flat size="15px" icon="insert_emoticon" v-popover:popover5 class="q-mr-sm"/>
  </span>
</template>

<script>
  import emoji from "./emoji";

  export default {
    data () {
      return {
        emojiList: emoji.obj,
        currentEmoji: "",
        showModal: false,
        tab: "init"
      };
    },
    methods: {
      addEmoji(){

      },
      selectEmoji (e) {
        let value = (this.inpMessage || "") + e;
        this.$emit("selectEmoji", value);
      },
      showEmoji () {
        this.showModal = !this.showModal
      }
    },
    props: {
      inpMessage: String
    }
  };
</script>
<style scoped>
    .img-style {
        width: 22px;
        margin: 5px;
        cursor: pointer;
    }

    .img-style:hover {
        background-color: #c8c8c8;
    }
</style>
